<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>PesticideGPT Client</title>
    <style>
      .robot-title{
        width: 100%;
        display: flex;
      }
      .robot-msg{
        text-align: left;
        padding-left: 20px;
        padding-right: 20px;
      }
      .robot-title img, .me-title img{
        width: 20px;
        height: 20px;
      }
      .robot-title img{
        margin-right: 3px;
      }
      .me-title img{
        margin-left: 3px;
      }
      .me-title{
        width: 100%;
        display: flex;
        justify-content: flex-end;
      }
      .me-msg{
        padding-left: 20px;
        padding-right: 20px;
        text-align: right;
      }
      ul{
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      li{
        padding: 3px;
        margin-bottom: 1rem;
        border-radius: 3px;
      }
      li:nth-child(even){
        background-color: #efefef;
        border: 1px solid lightgray;
      }
      li:nth-child(odd){
        border: 1px solid lightgray;
      }
      html, body{
        height: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
      }
      .content{
        margin: 0 auto;
        text-align: center;
      }
      .header{
        text-align: center;
      }
      .msg-wrapper{
        width: 35rem;
        height: 20rem;
        border: 1px solid gray;
        border-radius: 3px;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.8rem;
      }
      .input-wrapper{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-top: 5px;
        margin-bottom: 3px;
      }
      .btn-wrapper{
        text-align: right;
      }
      button{
        padding: 0.35rem 1rem;
      }
      textarea{
        font-size: 1.2rem;
        padding: 0.3rem 0.5rem;
        outline: none;
        resize: none;
        overflow-y: auto;
        overflow-x: hidden;
      }
    </style>
  </head>
  <body onload="connect()">
    <div class="header">
      <h2>PesticideGPT Client</h2>
      <div id="msg_wrapper" class="msg-wrapper">
        <ul id="msg_log">
        </ul>
      </div>
      <div class="input-wrapper">
        <textarea id="messageInput" autofocus rows="3" placeholder="input your message ..."></textarea>
      </div>
      <div class="btn-wrapper"><button onclick="sendMessage()">Send</button></div>
    </div>
  </body>
  <script>
    var ws;
    function connect() {
      ws = new WebSocket('ws://127.0.0.1:8443', 'wss-a');
      ws.onopen = function() {
        console.log('WebSocket connection established.');
      };
      ws.onmessage = function(event) {
        var message = event.data;
        var logElement = document.getElementById('log');
        var logElement = document.getElementById('msg_log');
        var liElement = document.createElement('li');
        liElement.innerHTML ='<div class="robot-title"><img src="/gpt.svg"><div>PesticideGPT</div></div><div class="robot-msg">'+message+'</div>';
        logElement.appendChild(liElement);
        var msg_w = document.getElementById('msg_wrapper');
        msg_w.scrollTop = msg_w.scrollHeight - msg_w.clientHeight;
      };
      ws.onerror = function(event) {
        console.error('WebSocket error: ' + event.data);
      };
      ws.onclose = function(event) {
        console.log('WebSocket connection closed.');
      };
    }
    function sendMessage() {
      var inputElement = document.getElementById('messageInput');
      var message = inputElement.value;
      ws.send(message);
      var logElement = document.getElementById('msg_log');
      var liElement = document.createElement('li');
      liElement.innerHTML ='<div class="me-title"><div>User</div><img src="/me.svg"></div><div class="me-msg">'+message+'</div>';
      logElement.appendChild(liElement);
      var msg_w = document.getElementById('msg_wrapper');
      msg_w.scrollTop = msg_w.scrollHeight - msg_w.clientHeight;
      inputElement.value = '';
    }
    document.getElementById('messageInput').addEventListener('keydown', function(event) {
      if (event.keyCode === 13) {
        event.preventDefault();
        sendMessage();
      }
    });
    document.addEventListener('keypress', function(e) {
      if (e.keyCode === 13 || e.which === 13) {
        sendMessage();
      }
    });
  </script>
</html>
